<!--
 * @Description:
 * @Author: guoxiaxue
 * @Date: 2024-11-26 09:38:43
 * @FilePath: \ySelect-master\boot.html
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--注意这里jquery的版本和css，js引入的顺序 -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/ySelect.css" rel="stylesheet" type="text/css" />

    <!-- Include the plugin's CSS and JS: -->
    <!-- <script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script> -->
    <!--无选择提示为中文,只是部分中文 -->
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"
    />
    <script src="js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
    <script type="text/javascript">
      console.log("start");
      $(document).ready(function () {
        $("#example-multiple").multiselect();
        $("#example-radio").multiselect();
        $("#example-multiple-optgroups").multiselect();
        $("#example-radio-optgroups").multiselect();
        /*
         *分组可选，可折叠，全选时不显示，所有option的数量
         */
        $("#example-enableClickableOptGroups").multiselect({
          enableClickableOptGroups: true,
          selectAllNumber: false,
        });
        /*
         *分组可选，可折叠，可全选，右侧显示下拉选项，
         *触发选择事件，可搜索，可展示已选择option的数量（numberDisplayed）
         */
        $("#example-all").multiselect({
          enableClickableOptGroups: true,
          enableCollapsibleOptGroups: true,
          includeSelectAllOption: true,
          buttonWidth: "400px",
          dropRight: true,
          maxHeight: 200,
          onChange: function (option, checked) {
            alert($(option).val());
            /*if(条件) {
                      this.clearSelection();//清除所有选择及显示
                 }*/
          },
          nonSelectedText: "请选择",
          numberDisplayed: 10,
          enableFiltering: true,
          allSelectedText: "全部",
        });
      });
    </script>
  </head>
  <body style="margin-left: 10">
    <div class="form-group">
      <label class="col-sm-3 control-label">客资类型：</label>
      <div class="col-sm-4">
        <select
          id="usertype"
          name="usertype"
          class="selectpicker show-tick form-control"
          multiple
          data-live-search="false"
        >
          <option value="0">苹果</option>
          <option value="1">菠萝</option>
          <option value="2">香蕉</option>
          <option value="3">火龙果</option>
          <option value="4">梨子</option>
          <option value="5">草莓</option>
          <option value="6">哈密瓜</option>
          <option value="7">椰子</option>
          <option value="8">猕猴桃</option>
          <option value="9">桃子</option>
        </select>
      </div>
    </div>
    <script>
      $(window).on("load", function () {
        $("#usertype").selectpicker({
          selectedText: "cat",
        });
      });
    </script>
  </body>
</html>
